<template>
  <div>
    <TopBar />
    <Aside />
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="flex items-center gap-3 justify-start text-3xl font-bold text-orange-600">
        Logo
        <span class="text-black">确认订单</span>
      </div>

      <div class="mt-8 flex justify-around">
        <div class="flex-4">
          <!-- 收货地址部分 -->
          <div class="mr-8 mb-8 bg-white p-5 border-gray-200 border rounded shadow">
            <h2 class="text-lg font-semibold mb-5">确认收货地址</h2>
            <div class="flex  gap-5 flex-wrap">
              <div :class="addressIndex == index ? 'border-orange-300' : ''"
                class="w-2/7 bg-white p-3 rounded-lg border-2 border-gray-200 relative  cursor-pointer"
                v-for="(item, index) in addressList" :key="index" @click="addressIndex = index">
                <div class="text-sm">
                  <span class="text-sm text-red-500 font-bold bg-pink-100 px-2 mx-1"
                    v-if="item.isDefault == 1">默认</span>
                  {{ item.province }} {{ item.city }} {{ item.district }}
                </div>
                <p class="my-1 font-bold text-lg">{{
                  item.detailAddress }}</p>
                <p class="text-sm text-gray-500">{{ item.receiverName }} {{ item.receiverPhone }}</p>
              </div>
            </div>
            <div class="flex justify-end gap-5 mt-2">
              <button class="hover:text-blue-600 text-sm cursor-pointer" @click="addressShow = true">管理地址</button>
            </div>
          </div>

          <!-- 订单信息部分 -->
          <div class="mr-8 p-4 border-gray-200 border rounded shadow">
            <h2 class="text-lg font-semibold mb-3">确认订单信息</h2>
            <div>
              <div class=" shadow-md h-65 overflow-auto p-1">
                <div class="mb-5 rounded-md border-gray-200 border" v-for="(item, index) in 3" :key="index">
                  <p class="p-2 px-4 text-base font-medium bg-gray-300">{{ seller.sellerName }}</p>
                  <div class="flex items-center justify-between my-3 px-5">
                    <div class="flex items-center">
                      <img class="w-10 mr-3" src="https://example.com/product-img.png" alt="商品图">
                      <div class="w-90 overflow-hidden text-nowrap text-ellipsis font-bold">
                        匹克态极拖鞋男夏季男士运动恢复外穿篮球防滑拖鞋女款户外沙滩鞋
                      </div>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500">颜色分类: 【男款】款 A-撞色-大白/黑色</p>
                      <p class="text-sm text-gray-500">鞋码: 38</p>
                    </div>
                    <div class="flex items-center">
                      <span class="mx-4">1</span>
                    </div>
                    <div>
                      <p class="text-sm text-red-600 font-medium">¥139</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex items-center mt-4">
                <span class=" text-sm text-gray-700">订单备注</span>
                <input class="w-1/3 ml-2 py-0.5 px-2 rounded-sm border border-gray-200" type="text"
                  placeholder="请输入，付款后商家可见，建议和商家协商一致">
              </div>
            </div>
          </div>
        </div>

        <!-- 付款详情部分 -->
        <div class="flex-1 bg-white p-5 border-gray-200 border rounded shadow-md ">
          <h2 class="text-lg font-semibold mb-2">付款详情 共1件商品</h2>
          <div class="my-5">
            <div class="flex justify-between mb-2">
              <p>商品总价</p>
              <p>¥169.00</p>
            </div>
            <div class="flex justify-between mb-2">
              <p>共减</p>
              <p>¥30</p>
            </div>
            <div class="mb-4">
              <label class="flex items-center mb-2">
                <input class="mr-2" type="radio" name="pay" value="alipay" checked>
                <span>支付宝</span>
              </label>
              <label class="flex items-center mb-2">
                <input class="mr-2" type="radio" name="pay" value="installment">
                <span>微信</span>
              </label>
            </div>
            <div class="flex justify-between items-center mb-4">
              <p>实付款</p>
              <p class="text-xl font-bold text-red-600">¥139</p>
            </div>
          </div>
          <button class="w-full bg-orange-600 text-white text-lg font-bold py-2 rounded cursor-pointer"
            @click="openFullScreen">提交订单</button>
        </div>
      </div>
    </div>
    <Address v-show="addressShow" @hidden="addressShow = false; getAddress()" />
  </div>
</template>

<script setup>
import { getAddressApi } from '@/apis/address';
import Address from '@/components/Address.vue';
import Aside from '@/components/Aside.vue';
import TopBar from '@/components/TopBar.vue';
import { ref } from 'vue';
import { ElLoading, ElMessage } from 'element-plus'
import { getSellerInfo } from '@/apis/user';
const addressList = ref([])
let addressShow = ref(false)
let addressIndex = ref(0)
const seller = ref()
const getSeller = async () => {
  let res = await getSellerInfo()
  seller.value = res.data
}
const getAddress = async () => {
  try {
    let res = await getAddressApi()
    addressList.value = res.data
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}
const openFullScreen = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '请稍等...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
    ElMessage.success('付款成功')
  }, 2000)
}
getAddress()
getSeller()
</script>

<style lang="scss" scoped></style>